<template>
	<view class="container" v-if="pageData">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 100vw;">
			<swiper-item v-for="(item,index) in pageData.pics" :key="index">
				<image :src="item" mode="aspectFit" style="width: 100vw;height: 100vw;"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<view class="shopname">
				<view>
					{{pageData.item_name?pageData.item_name:''}}
				</view>
				<view class="pirce">￥{{pageData.price?Number(pageData.price/100).toFixed(2):'0.00'}} <text
						class="small_price">￥{{pageData.ecommerce_platform_price?Number(pageData.ecommerce_platform_price).toFixed(2):'0.00'}}</text>
				</view>
			</view>
		</view>
		<view class="fwb">
			<bctos-rich-text :nodes="pageData.intro"></bctos-rich-text>
		</view>
		<view class="footer">
			<view class="btns" @click="$gourl('/pages/order/order',2)">
				<view>
					<u-icon name="order" size="45" color="#b5b5b5"></u-icon>
				</view>
				<view>客服</view>
			</view>
			<view class="btns" @click="$gourl('/pages/index/shopCar',2)">
				<view>
					<u-icon name="shopping-cart" size="45" color="#b5b5b5"></u-icon>
				</view>
				<view>购物车</view>
			</view>
			<view class="btn" @click="payTypes(1)">加入购物车</view>
			<view class="btn" style="background: #ff3b3b;" @click="payTypes(2)">立即购买</view>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view class="mask" v-if="pageData.spec_items.length>0">
				<view class="shop_info">
					<image :src="pageData.pics[0]" mode="aspectFill"></image>
					<view class="shop_text">
						<view class="shop_price">￥{{Number(pageData.spec_items[skuCurrent].price/100).toFixed(2)}}
						</view>
						<view class="shop_number">库存：{{pageData.spec_items[skuCurrent].store}}</view>
						<view class="shop_miaosu">
							已选：{{(pageData.spec_items[skuCurrent].custom_spec_name)}}
						</view>
					</view>
				</view>
				<view class="shop_sku" v-for="(item,index) in pageData.item_spec_desc">
					<view class="title">{{item.spec_name}}</view>
					<view class="con">
						<view class="cont_list" @click="skuClick(index,index2)" :class="item2.select?'active':''"
							v-for="(item2,index2) in item.spec_values" :key="index">
							{{item2.spec_value_name}}
						</view>
					</view>
				</view>
				<view class="shops_number">
					<view class="title">数量</view>
					<view class="number">
						<view @click="numberFun('add')">
							<u-icon name="plus"></u-icon>
						</view>
						<input type="number" v-model="value">
						<view @click="numberFun('reduce')"><u-icon name="minus"></u-icon></view>
					</view>
				</view>
				<view class="btnss">
					<view class="add" v-if="payType == 1" @click="addCart">加入购物车</view>
					<view class="add" v-if="payType == 2" @click="buyClick">立即购买</view>
				</view>
			</view>
			<view class="mask" v-else>
				<view class="shop_info">
					<image :src="pageData.pics[0]" mode="aspectFill"></image>
					<view class="shop_text">
						<view class="shop_price">￥{{Number(pageData.price/100).toFixed(2)}}
						</view>
						<view class="shop_number">库存：{{pageData.store}}</view>
					</view>
				</view>
				<view class="shop_sku" v-for="(item,index) in pageData.item_spec_desc">
					<view class="title">{{item.spec_name}}</view>
					<view class="con">
						<view class="cont_list" @click="skuClick(index,index2)" :class="item2.select?'active':''"
							v-for="(item2,index2) in item.spec_values" :key="index">
							{{item2.spec_value_name}}
						</view>
					</view>
				</view>
				<view class="shops_number">
					<view class="title">数量</view>
					<view class="number">
						<view @click="numberFun('add')">
							<u-icon name="plus"></u-icon>
						</view>
						<input type="number" v-model="value">
						<view @click="numberFun('reduce')"><u-icon name="minus"></u-icon></view>
					</view>
				</view>
				<view class="btnss">
					<view class="add" v-if="payType == 1" @click="addCart">加入购物车</view>
					<view class="add" v-if="payType == 2" @click="buyClick">立即购买</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
				value: 1,
				payType: 1, //1购物车2跟团
				skuCurrent: 0,
				pageData: {},
				main_goods: {},
				goodsItem: {},
				baseUrl: this.$baseUrl,
				fwbBox: [],
				cartInfo: [],
				lx: '',
				id: 0,
			}
		},
		onLoad(opdata) {
			this.id = opdata.id
			this.getData()
		},
		onShow() {
			uni.removeStorageSync('selectAddressId') //离开或者重新购买删除选中地址的id
		},
		methods: {
			numberFun(type) {
				if (type == 'add') {
					this.value++
				} else {
					if (this.value > 1) {
						this.value--
					}
				}
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				this.$allApi.getGoodsDetails({
					item_id: this.id
				}).then(res => {
					this.pageData = res.data
					console.log('data', this.pageData);
					if (this.pageData.item_spec_desc.length > 0) {
						for (let i of this.pageData.item_spec_desc) {
							for (let j of i.spec_values) {
								j.select = false
							}
						}
					}
					uni.hideLoading()
				})
			},
			skuClick(index1, index2) {
				// this.pageData.item_spec_desc[index1].spec_values[index2].select = true
				let skuid = []
				for (let i in this.pageData.item_spec_desc[index1].spec_values) {
					if (i == index2) {
						this.pageData.item_spec_desc[index1].spec_values[i].select = true
					} else {
						this.pageData.item_spec_desc[index1].spec_values[i].select = false
					}
				}
				for (let i of this.pageData.item_spec_desc) {
					for (let j of i.spec_values) {
						if (j.select) {
							skuid.push(j.spec_value_id)
						}
					}
				}
				let skuidText = skuid.join('-')
				for (let indexs in this.pageData.spec_items) {
					if (skuidText == this.pageData.spec_items[indexs].custom_spec_id) {
						this.skuCurrent = indexs
					}
				}
				console.log(this.skuCurrent);
				this.$forceUpdate()
			},
			payTypes(type) {
				this.payType = type
				this.show = true
				for (let i of this.pageData.item_spec_desc) {
					for (let j in i.spec_values) {
						if (j == 0) {
							i.spec_values[j].select = true
						} else {
							i.spec_values[j].select = false
						}
					}
				}
			},
			addCart() {
				let item_id = 0
				if (this.pageData.spec_items.length > 0) {
					item_id = this.pageData.spec_items[this.skuCurrent].item_id
				} else {
					item_id = this.pageData.item_id
				}
				this.$allApi.addCart({
					item_id: item_id,
					num: this.value
				}).then(res => {
					this.$u.toast('添加购物车成功')
					this.show = false
				})
			},

			buyClick() {
				let item_id = 0
				if (this.pageData.spec_items.length > 0) {
					item_id = this.pageData.spec_items[this.skuCurrent].item_id
				} else {
					item_id = this.pageData.item_id
				}
				this.$allApi.addCart({
					item_id: item_id,
					num: this.value,
					cart_type: 'fastbuy'
				}).then(res => {
					this.show = false
					let shopInfo = {
						data: this.pageData,
						current: this.skuCurrent,
						num: this.value
					}
					uni.setStorageSync('shopInfo', JSON.stringify(shopInfo))
					this.$gourl('/pages/pay/buyPay', 3)
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		background: #f6f6f6;
		padding-bottom: 120rpx;
	}

	.header {
		background-size: 100% 100% !important;

		// height: ;
		.infos {
			height: 315rpx;
			position: relative;

			.boxs {
				height: 130rpx;
				background: #fff;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				border-radius: 20rpx 20rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;

				.pic {
					image {
						width: 130rpx;
						height: 130rpx;
						margin-top: -60rpx;
						border-radius: 20rpx;
					}
				}

				.text_box {
					flex: 1;
					padding-left: 30rpx;
					line-height: 1.8;

					.title {
						font-size: 30rpx;
					}

					.address {
						font-size: 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.addre {
							max-width: 435rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #999;
						}

						.map {
							color: #16b45d;
						}
					}
				}
			}
		}
	}

	.content {
		// margin-top: 20rpx;
		padding-top: 20rpx;
		background: #fff;

		.shopname {
			padding: 20rpx;

			view {
				font-size: 30rpx;
				line-height: 1.5;
			}

			.pirce {
				color: red;
				font-weight: bold;
				margin-top: 10rpx;
			}

			.small_price {
				font-size: 24rpx;
				font-weight: bold;
				color: #999;
				text-decoration: line-through;
			}
		}
	}

	.fwb {
		padding: 20rpx;
		margin-top: 20rpx;
		background: #fff;
	}

	.footer {
		position: fixed;
		z-index: 99;
		background: #fff;
		width: 100vw;
		height: 120rpx;
		left: 0;
		bottom: 0;
		border-top: 1px solid #eee;
		padding-bottom: calc(-30rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			text-align: center;
			flex: 1;
		}

		.btns {
			border-right: 1px solid #eee;
			font-size: 24rpx;
			color: #999;
		}

		.btn {
			background: #f8b854;
			color: #fff;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}

	.mask {
		padding: 30rpx;
		padding-bottom: 0;
		padding-bottom: calc(-30rpx + env(safe-area-inset-bottom));

		.shop_info {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding-bottom: 20rpx;

			image {
				width: 220rpx;
				height: 220rpx;
			}

			.shop_text {
				flex: 1;
				padding-left: 30rpx;
				line-height: 1.5;

				.shop_price {
					font-size: 30rpx;
					font-weight: bold;
					color: red;
				}

				.shop_number {
					font-size: 24rpx;
					color: #666;
				}

				.shop_miaosu {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.shop_sku {
			margin-top: 20rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.con {
				padding-bottom: 20rpx;
				display: flex;
				justify-content: flex-start;
				flex-direction: row;
				flex-wrap: wrap;
				border-bottom: 1px solid #eee;

				.cont_list {
					font-size: 26rpx;
					background: #f6f6f6;
					margin-top: 20rpx;
					border-radius: 10rpx;
					padding: 20rpx;
					display: inline-block;
					margin-right: 20rpx;
				}

				.active {
					border: 1px solid #fad291 !important;
					color: #f8b854 !important;
					background: #fef5e6 !important
				}
			}
		}

		.shops_number {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.number {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				input {
					width: 88rpx;
					border: 1px solid #ccc;
					height: 60rpx;
					border-radius: 10rpx;
					text-align: center;
				}

				view {
					width: 66rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #f7f8fa;
					color: #666;
				}
			}
		}

		.btnss {
			margin-top: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			align-items: center;

			view {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				color: #fff;
				background: #ff3b3b;
			}
		}
	}
</style>